<template>
    <div :class="['modal', {fade: fade}]" data-backdrop="static" data-disable="false" data-keyboard="true" tabindex="-1">
        <div :class="['modal-dialog', size]">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                        <span aria-hidden="true">&times;</span>
                    </button>
                    <h4 class="modal-title text-center text-primary"><span>{{title}}</span></h4>
                </div>
                <div class="modal-body">
                    <div class="form-inline" autocomplete="off" spellcheck="false">
                        <div class="form-group form-group-sm">
                            <label>搜索</label>
                            <input type="text" class="form-control" placeholder="关键字" v-model.trim="q" @keydown.enter.prevent ref="q">
                        </div>
                        <div class="form-group form-group-sm pull-right">
                            <div class="btn-group btn-group-sm">
                                <button type="button" class="btn btn-primary" @click.prevent="getDevices"><i class="fa fa-refresh"></i> 刷新</button>
                            </div>
                        </div>
                    </div>
                    <br>
                    <el-table :data="devices" stripe :default-sort="{prop: 'LoginAt', order: 'descending'}" @sort-change="sortChange" :max-height="500" v-loading="loading" element-loading-text="加载中...">
                        <el-table-column prop="ID" label="设备ID" min-width="200" show-overflow-tooltip sortable="custom"></el-table-column>
                        <el-table-column prop="ChannelCount" label="通道数" min-width="100" sortable="custom"></el-table-column>
                        <el-table-column prop="RemoteIP" label="出口 IP" min-width="140"></el-table-column>
                        <el-table-column prop="RemotePort" label="端口" min-width="100"></el-table-column>
                        <el-table-column prop="Serial" label="设备序列号" min-width="200" show-overflow-tooltip sortable="custom"></el-table-column>
                        <el-table-column prop="ProtocolVersion" label="协议版本" min-width="100" :formatter="formatVersion"></el-table-column>
                        <el-table-column prop="LoginAt" label="上线时间" min-width="160" sortable="custom"></el-table-column>
                    </el-table>
                    <el-pagination v-if="total > 0" layout="total,prev,pager,next,sizes" :pager-count="isMobile() ? 3 : 5" class="pull-right" :total="total" :page-size.sync="pageSize" :current-page.sync="currentPage"></el-pagination>
                    <div class="clearfix"></div>
                </div>
                <!-- <div class="modal-footer">
                    <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
                </div> -->
            </div>
        </div>
    </div>
</template>

<script>
    import 'jquery-ui/ui/widgets/draggable';
    import $ from 'jquery';
    import _ from "lodash";
    import { mapState } from "vuex";

    export default {
        props: {
            size: {
                type: String,
                default: ''
            },
            fade: {
                type: Boolean,
                default: false
            },
            title: {
                type: String,
                default: 'ISUP 设备列表'
            }
        },
        data() {
            return {
                q: "",
                total: 0,
                pageSize: 10,
                currentPage: 1,
                sort: "",
                order: "",
                loading: false,
                devices: [],
            }
        },
        watch: {
            q: function(newVal, oldVal) {
                this.doDelaySearch();
            },
            currentPage: function(newVal, oldVal) {
                this.doSearch(newVal);
            },
            pageSize: function(newVal, oldVal) {
                this.doSearch();
            }
        },
        computed: {
            ...mapState(['userInfo', 'serverInfo']),
        },
        mounted() {
            $(this.$el).find('.modal-content').draggable({
                handle: '.modal-header',
                cancel: ".modal-title span",
                addClasses: false,
                containment: 'document',
                delay: 100,
                opacity: 0.5
            });
            $(this.$el).on("shown.bs.modal", () => {
                this.$emit("show");
            }).on("hidden.bs.modal", () => {
                this.errors.clear();
                this.reset();
                this.$emit("hide");
            })
        },
        methods: {
            sortChange(data) {
                this.sort = data.prop;
                this.order = data.order == "ascending" ? "asc" : "desc";
                this.getDevices();
            },
            doSearch(page = 1) {
                this.currentPage = page;
                this.getDevices();
            },
            doDelaySearch: _.debounce(function() {
                this.doSearch();
            }, 800),
            getDevices(e) {
                this.loading = true;
                $.get(`/api/v1/isup/devices`, {
                    q: this.q,
                    start: (this.currentPage -1) * this.pageSize,
                    limit: this.pageSize,
                    sort: this.sort,
                    order: this.order,
                }).then(ret => {
                    this.total = ret.DeviceCount || 0;
                    this.devices = ret.Devices || [];
                    if(e && e.target) {
                        this.$message({
                            type: "success",
                            message: "刷新成功！",
                        });
                    }
                }).always(() => {
                    this.loading = false;
                });
            },
            formatVersion(row, col, cell) {
                if(!row['ProtocolVersion']) return "-";
                return `v${row['ProtocolVersion']}`;
            },
            reset() {
                this.devices = [];
                this.q = "";
                this.currentPage = 1;
                this.pageSize = 10;
            },
            show() {
                $(this.$el).modal("show");
                this.getDevices();
            },
            hide() {
                $(this.$el).modal("hide");
            },
        }
    }
</script>

<style lang="less" scoped>
    .modal-content {
        overflow: hidden;
    }

    @media screen and(min-width: 992px){
        .modal-dialog.modal-lgg {
            width: 90%;
        }
    }

    @media screen and(min-width: 1200px){
        .modal-dialog.modal-lgg {
            width: 1200px;
        }
    }
</style>
